<!--
 * @Author: licheng licheng@jiuqi.com.cn
 * @Date: 2025-07-22 11:39:08
 * @LastEditors: licheng licheng@jiuqi.com.cn
 * @LastEditTime: 2025-08-01 15:00:30
 * @FilePath: /lure-camera/src/views/fittingRoom/modules/CreateForm.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <a-modal
    title="新建"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    @ok="okHandle()"
    @cancel="cancelHandle()"
  >
    <a-spin :spinning="loading">
      <a-form-model ref="ruleForm" :model="formModel" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
        <!-- 检查是否有 id 并且大于0，大于0是修改。其他是新增，新增不显示主键ID  v-show="model && model.id > 0"-->
        <a-form-model-item label="服装名称" prop="name">
          <a-input v-model="formModel.name" placeholder="请输入服装名称" />
        </a-form-model-item>
        <a-form-model-item label="服装版正图" prop="image">
          <image-drop v-model="formModel.image" :loading="loading" />
        </a-form-model-item>
        <a-form-model-item label="模特着装照" prop="mannequin">
          <div style="display: flex; align-items: center; gap: 16px">
            <image-drop v-model="formModel.mannequin" :loading="loading" />
            <a-button type="primary">AI生成</a-button>
          </div>
        </a-form-model-item>
        <a-form-model-item label="类型" prop="type">
          <a-select v-model="formModel.type">
            <a-select-option value="1">上身</a-select-option>
            <a-select-option value="2">下身</a-select-option>
            <a-select-option value="3">全身</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="风格描述" prop="description">
          <a-textarea v-model="formModel.description" placeholder="请输入风格描述或使用下放AI生成" :rows="4" />
          <a-button type="primary">AI生成</a-button>
        </a-form-model-item>
        <a-form-model-item label="风格关键字" prop="label">
          <a-input v-model="formModel.label" />
        </a-form-model-item>
        <a-form-model-item label="商铺链接" prop="link">
          <a-input v-model="formModel.link" />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </a-modal>
</template>

<script>
import Vue from 'vue'
import { FormModel } from 'ant-design-vue'

import ImageDrop from '@/components/ImageDrop/ImageDrop.vue'
Vue.use(FormModel)

export default {
  components: { ImageDrop },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data () {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      formModel: {
        description: '',
        id: '',
        image: '',
        label: '',
        link: '',
        mannequin: '',
        name: '',
        type: ''
      },
      previewImage: '',
      previewVisible: false,
      fileList: [],
      rules: {
        name: [
          { required: true, message: 'Please input Activity name', trigger: 'blur' }
        ],
        image: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
        mannequin: [{ required: true, message: 'Please pick a date', trigger: 'change' }],
        type: [
          {
            type: 'string',
            required: true,
            message: 'Please select at least one activity type',
            trigger: 'change'
          }
        ]
        // resource: [{ required: true, message: 'Please select activity resource', trigger: 'change' }],
        // description: [{ required: true, message: 'Please input activity form', trigger: 'blur' }]
      }
    }
  },
  methods: {
    okHandle () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log(this.formModel)
          this.$emit('ok', this.formModel)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    cancelHandle () {
      this.$emit('cancel')
    },
    handleCancel () {
      this.previewVisible = false
    }
  },
  created () {
    console.log('custom modal created')
  }
}
</script>
